{% extends 'manage/base_manage.html' %}
{% load static %}
{% block title %}添加流程接口用例{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/api_test/api_test_add.css' %}">
{% endblock %}

{% block content %}
    <div class="content">
        <div id="test_content_apis">
            <h3 id="add_test_name">添加流程接口用例</h3>
            <div id="title_apis">
                <form id="api_t_input" method="post" action="{% url 'atp:api_test_add' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label id='product_name_distance' for="p_name_input">产品：</label>
                        <br><br>
                        <select class="form-control" name="dropdown">
                            {% for pro_name in pro_names %}
                                <option value="{{ pro_name.pk }}">
                                    {{ pro_name.product_name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_des_input">接口用例名称：</label>
                        <br><br>
                        <input name="api_t_name" type="text" class="form-control" id="p_des_input"
                               placeholder="输入接口用例名称" required="required">
                        <p id="msg_api_name" style="color: red"></p>
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_er_input">接口用例描述：</label>
                        <br><br>
                        <input name="api_t_desc" type="text" class="form-control" id="p_er_input"
                               placeholder="输入接口用例描述">
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_er_input">测试负责人：</label>
                        <br><br>
                        <input name="api_ter" type="text" class="form-control" id="p_er_input" placeholder="输入测试负责人">
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_er_input">测试结果：</label>
                        <br><br>
                        <select class="form-control" name="api_t_status">
                            <option value="1">True</option>
                            <option value="0">False</option>
                        </select>
                    </div>
                    <button id="btnSubmit" type="button" class="btn">保存</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        toastr.options = {
            closeButton: true,
            timeOut: "1000",
            positionClass: "toast-center-center",
        };

        $(function () {
            btnSubmit();
        });

        // 点击提交数据
        function btnSubmit() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: "{% url 'atp:api_test_add' %}",
                    type: "POST",
                    dataType: "JSON",
                    data: $('#api_t_input').serialize(),
                    success: function (res) {
                        if (res.code === 200) {
                            toastr.success("添加成功");
                            setTimeout(function () {
                                location.href = "{% url 'atp:api_test_manage' %}"
                            }, 1000)
                        } else if (res.code === 201) {
                            toastr.success("添加失败");
                            location.href = "{% url 'atp:api_test_manage' %}"
                        } else if (res.code === 202) {
                            $('#msg_api_name').text("接口用例名称不能为空")
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}